<template>
    <div>
        <div v-for="(item,index) in dataList" :key="index">

            <section class="main" v-if="index===0" @mouseenter="enter(index)" @mouseleave="leave()">

                <div class="imgbox">
                    <img :src="item.picUrl" alt="" width="100%" v-if="item.picUrl"/>
                    <a-avatar shape="square" :size="200" icon="file-image" v-else/>
                </div>

                <p class="title">  <a-icon type="edit"   v-if="dataIndex===index"/> {{item.title}}</p>

                <div class="tool" v-show="seen&&current ===index">

                    <a-button icon="edit" type="primary" class="btnMargin" @click="onChange(index)"
                              shape="circle"></a-button>
                    <a-button   v-if="isUpdate" icon="link" type="primary" class="btnMargin" @click="preview(item.url)"
                                shape="circle"></a-button>
                    <a-button v-if="!isUpdate" icon="delete" type="primary" class="btnMargin" @click="onRemove(index)"
                              shape="circle"></a-button>
                    <a-button v-if="!isUpdate" icon="arrow-up" type="primary" class="btnMargin" @click="indexUp(index)"
                              shape="circle"></a-button>
                    <a-button v-if="!isUpdate" icon="arrow-down" type="primary" class="btnMargin"
                              @click="indexDown(index)" shape="circle"></a-button>

                </div>

            </section>

            <section class="mx" v-else @mouseenter="enter(index)" @mouseleave="leave()">
                <a-row :gutter="8" class="mxList">
                    <a-col :span="18" class="title">
                        <p class="text-ellipsis2">  <a-icon type="edit"   v-if="dataIndex===index"/> {{item.title}}</p>
                    </a-col>
                    <a-col :span="6">
                        <div class="mximgbox">
                            <img :src="item.picUrl" alt="" width="100%" v-if="item.picUrl"/>
                            <a-avatar shape="square" :size="60" v-else>IMG{{index}}</a-avatar>
                        </div>
                    </a-col>
                    <a-col :span="24" class="mxTool" v-show="seen&&current ===index">
                        <a-button icon="edit" type="primary" class="btnMargin" @click="onChange(index)"
                                  shape="circle"></a-button>
                        <a-button   v-if="isUpdate" icon="link" type="primary" class="btnMargin" @click="preview(item.url)"
                                  shape="circle"></a-button>
                        <a-button v-if="!isUpdate" icon="delete" type="primary" class="btnMargin"
                                  @click="onRemove(index)" shape="circle"></a-button>
                        <a-button v-if="!isUpdate" icon="arrow-up" type="primary" class="btnMargin"
                                  @click="indexUp(index)" shape="circle"></a-button>
                        <a-button v-if="!isUpdate" icon="arrow-down" type="primary" class="btnMargin"
                                  @click="indexDown(index)" shape="circle"></a-button>
                    </a-col>
                </a-row>
            </section>
        </div>
        <section class="footer" v-show="dataList.length<8 && !isUpdate">
            <a-button icon="edit" @click="onAddItem">添加图文</a-button>
        </section>
    </div>
</template>
<script>
    export default {
        props: ['dataList', 'isUpdate','dataIndex'],
        data() {
            return {
                seen: false, //显示编辑遮罩
                current: -1, //编辑条码
            };
        },
        methods: {
            enter(index) {
                this.seen = true;
                this.current = index;
            },
            leave() {
                this.seen = false;
                this.current = -1;
            },
            preview(url){
                window.open(url,"_blank")
            },
            onAddItem() {
                this.$emit("onAddItem", true);
            },
            onRemove(index) {
                this.$emit("onRemove", index);
            },
            onChange(index) {
                this.$emit("onChange", index);
            },
            indexUp(index) {
                this.$emit("indexUp", index);
            },
            indexDown(index) {
                this.$emit("indexDown", index);
            },
        }
    };
</script>
<style>
    .btnMargin {
        margin: 8px;
    }
    .main {
        clear: both;
        width: 100%;
        height: 200px;
        background-color: #FFFFFF;
    }
    .main .imgbox {
        width: 100%;
        height: 200px;
        overflow: hidden;
        text-align: center;
    }
    .main .title {
        font-size: 15px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        vertical-align: middle;
        color: #ffffff;
        line-height: 1.4em;
        padding: 6px;
        position: relative;
        margin-top: -50px;
    }
    .main .tool {
        width: 100%;
        height: 200px;
        background-color: rgba(210, 105, 30, 0.2);
        font-size: 16px;
        text-align: center;
        padding-top: 80px;
        box-sizing: border-box;
        margin-top: -215px;
        position: relative;
        z-index: 99999;
    }
    .mxList {
        height: 70px;
        padding: 4px;
        box-sizing: border-box;
        line-height: 1.8em;
        border-bottom: 1px solid #f1f1f1;
    }
    .mxList .title {
        height: 70px;
        line-height: 35px;
        vertical-align: middle;
        font-size: 15px;
        align-items: center;
        display: -webkit-flex;
    }
    .mximgbox {
        width: 64px;
        height: 64px;
        overflow: hidden;
    }
    .mxTool {
        position: relative;
        box-sizing: border-box;
        background-color: rgba(210, 180, 30, 0.2);
        width: 100%;
        height: 80px;
        margin-top: -80px;
        padding-top: 20px;
        text-align: center;
        z-index: 999;
    }
    .footer {
        clear: both;
        width: 100%;
        box-sizing: border-box;
        background-color: #f1f1f1;
        text-align: center;
        padding: 20px;
    }
</style>
